<!--
**********************************************************
* @Author: 张小平
* @Date:   2024-05-01
* @Email:  qqshuqian@163.com
* @Last modified: 最后修改日期
* @Description: 文件描述
**********************************************************
-->
<template>
  <div class="tabs" :style="{ height: height + 'px' }">
    <div v-for="(item, i) in data" :key="i" :class="{ active: isActive(i) }" @click="handleTab(item, i)">
      {{ item }}
    </div>
  </div>
</template>

<script>
export default {
  props: {
    data: {
      type: Array,
      default: () => []
    },
    height: {
      type: Number,
      default: 50
    },
    activeColor: {
      type: String,
      default: '#000000'
    },
    tab: {
      type: Number,
      default: 0
    },
    isRightBtn: {
      type: Boolean,
      default: true
    }
    // style: {
    //   type: Object,
    //   default: () => {}
    // }
  },
  data() {
    return {}
  },
  methods: {
    isActive(i) {
      return i === this.tab
    },
    handleTab(item, index) {
      // this.tab = index
      this.$emit('on-tab', item, index)
    }
  }
}
</script>

<style lang="scss" scoped>
@import '/src/styles/variables.scss';
.tabs {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  background-color: #fff;
  border-bottom: 1px solid #fafafa;
  position: relative;
}
.tabs > div {
  padding: 0 16px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: rgba(92, 92, 92, 0.5);
  border-bottom: 2px solid transparent;
  box-sizing: border-box;
  font-size: 14px;
}
.tabs > div.active {
  font-weight: 700;
  color: $mainBg;
  border-bottom: 2px solid $mainBg;
}
</style>
